<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>商家信息</p>
    </header>

    <!-- 商家logo部分 -->
    <div class="business-logo">
      <img :src="business.img" :alt="business.name">
    </div>

    <!-- 商家信息部分 -->
    <div class="business-info">
      <h1>{{ business.name }}</h1>
      <p>&#165;{{ business.minPrice }}起送 &#165;{{ business.deliveryFee }}配送</p>
      <p>{{ business.description }}</p>
    </div>

    <!-- 食品列表部分 -->
    <ul class="food">
      <li v-for="(food, index) in foodList" :key="index">
        <div class="food-left">
          <img :src="food.img" :alt="food.name">
          <div class="food-left-info">
            <h3>{{ food.name }}</h3>
            <p>{{ food.description }}</p>
            <p>&#165;{{ food.price }}</p>
          </div>
        </div>
        <div class="food-right">
          <div v-if="food.quantity > 0">
            <i class="fa fa-minus-circle" @click="decreaseQuantity(food)"></i>
          </div>
          <p v-if="food.quantity > 0"><span>{{ food.quantity }}</span></p>
          <div>
            <i class="fa fa-plus-circle" @click="increaseQuantity(food)"></i>
          </div>
        </div>
      </li>
    </ul>

    <!-- 底部安全间距 -->
    <div class="bottom-safe-area"></div>

    <!-- 购物车部分 -->
    <div class="cart">
      <div class="cart-left">
        <div class="cart-left-icon">
          <i class="fa fa-shopping-cart"></i>
          <div class="cart-left-icon-quantity" v-if="totalQuantity > 0">{{ totalQuantity }}</div>
        </div>
        <div class="cart-left-info">
          <p>&#165;{{ totalPrice }}</p>
          <p>另需配送费{{ business.deliveryFee }}元</p>
        </div>
      </div>
      <div class="cart-right">
        <div 
          class="cart-right-item" 
          :style="{ backgroundColor: totalPrice >= business.minPrice ? '#38CA73' : '#535356', cursor: totalPrice >= business.minPrice ? 'pointer' : 'default' }"
          @click="totalPrice >= business.minPrice && goToOrder()"
        >
          {{ totalPrice >= business.minPrice ? '去结算' : '￥'+business.minPrice+'起送' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useOrder } from '../composables/useOrder'

export default defineComponent({
  name: 'BusinessInfo',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const { 
      setBusiness, 
      setCartItems, 
      addToCart, 
      removeFromCart, 
      totalQuantity, 
      totalPrice,
      business: currentBusiness
    } = useOrder()

    const business = ref({
      id: 1,
      name: '万家饺子（驼峰街店）',
      img: new URL('../assets/img/sj01.png', import.meta.url).href,
      minPrice: 15,
      deliveryFee: 3,
      description: '各种饺子炒菜'
    })

    const foodList = ref([
      {
        id: 1,
        name: '纯肉鲜肉（水饺）',
        description: '新鲜猪肉',
        price: 15,
        img: new URL('../assets/img/sp01.png', import.meta.url).href,
        quantity: 0
      },
      {
        id: 2,
        name: '玉米鲜肉（水饺）',
        description: '玉米鲜肉',
        price: 16,
        img: new URL('../assets/img/sp02.png', import.meta.url).href,
        quantity: 0
      },
      {
        id: 3,
        name: '虾仁三鲜（蒸饺）',
        description: '虾仁三鲜',
        price: 22,
        img: new URL('../assets/img/sp03.png', import.meta.url).href,
        quantity: 0
      },
      {
        id: 4,
        name: '素三鲜（蒸饺）',
        description: '素三鲜',
        price: 15,
        img: new URL('../assets/img/sp04.png', import.meta.url).href,
        quantity: 0
      },
      {
        id: 5,
        name: '角瓜鸡蛋（蒸饺）',
        description: '角瓜鸡蛋',
        price: 16,
        img: new URL('../assets/img/sp05.png', import.meta.url).href,
        quantity: 0
      },
      {
        id: 6,
        name: '小白菜肉（水饺）',
        description: '小白菜肉',
        price: 18,
        img: new URL('../assets/img/sp06.png', import.meta.url).href,
        quantity: 0
      },
      {
        id: 7,
        name: '芹菜牛肉（水饺）',
        description: '芹菜牛肉',
        price: 18,
        img: new URL('../assets/img/sp07.png', import.meta.url).href,
        quantity: 0
      }
    ])

    const increaseQuantity = (food: any) => {
      food.quantity++
      addToCart(food)
    }

    const decreaseQuantity = (food: any) => {
      if (food.quantity > 0) {
        food.quantity--
        removeFromCart(food.id)
      }
    }

    const goToOrder = () => {
      // 更新全局状态
      setCartItems(foodList.value)
      router.push('/order')
    }

    // 初始化时设置商家信息
    onMounted(() => {
      setBusiness(business.value)
    })

    return {
      business,
      foodList,
      totalQuantity,
      totalPrice,
      increaseQuantity,
      decreaseQuantity,
      goToOrder
    }
  }
})
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper{
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header{
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/****************** 商家logo部分 ******************/
.wrapper .business-logo{
  width: 100%;
  height: 35vw;
  margin-top: 12vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .business-logo img{
  width: 40vw;
  height: 30vw;
  border-radius: 5px;
}

/****************** 商家信息部分 ******************/
.wrapper .business-info{
  width: 100%;
  height: 20vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wrapper .business-info h1{
  font-size: 5vw;
}
.wrapper .business-info p{
  font-size: 3vw;
  color: #666;
  margin-top: 1vw;
}

/****************** 食品列表部分 ******************/
.wrapper .food{
  width: 100%;
}
.wrapper .food li{
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .food li .food-left{
  display: flex;
  align-items: center;
}
.wrapper .food li .food-left img{
  width: 20vw;
  height: 20vw;
}
.wrapper .food li .food-left .food-left-info{
  margin-left: 3vw;
}
.wrapper .food li .food-left .food-left-info h3{
  font-size: 3.8vw;
  color: #555;
}
.wrapper .food li .food-left .food-left-info p{
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}
.wrapper .food li .food-right{
  width: 16vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .food li .food-right .fa-minus-circle{
  font-size: 5.5vw;
  color: #999;
  cursor: pointer;
}
.wrapper .food li .food-right p{
  font-size: 3.6vw;
  color: #333;
}
.wrapper .food li .food-right .fa-plus-circle{
  font-size: 5.5vw;
  color: #0097EF;
  cursor: pointer;
}

/****************** 购物车部分 ******************/
.wrapper .cart{
  width: 100%;
  height: 14vw;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
}
.wrapper .cart .cart-left{
  flex: 2;
  background-color: #505051;
  display: flex;
}
.wrapper .cart .cart-left .cart-left-icon{
  width: 16vw;
  height: 16vw;
  box-sizing: border-box;
  border: solid 1.6vw #444;
  border-radius: 8vw;
  background-color: #3190E8;
  font-size: 7vw;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -4vw;
  margin-left: 3vw;
  position: relative;
}
.wrapper .cart .cart-left .cart-left-icon-quantity{
  width: 5vw;
  height: 5vw;
  border-radius: 2.5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}
.wrapper .cart .cart-left .cart-left-info{
  margin-left: 3vw;
}
.wrapper .cart .cart-left .cart-left-info p:first-child{
  font-size: 4.5vw;
  color: #fff;
  margin-top: 1vw;
}
.wrapper .cart .cart-left .cart-left-info p:last-child{
  font-size: 2.8vw;
  color: #AAA;
}

.wrapper .cart .cart-right{
  flex: 1;
}
.wrapper .cart .cart-right .cart-right-item{
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/****************** 底部安全区域 ******************/
.bottom-safe-area {
  height: 40vw;
  width: 100%;
  background: transparent;
  flex-shrink: 0;
}
</style> 